<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">
        <!-- 作为布局一部分的任何Vuetify组件都会将其当前高度和/或宽度注册到框架核心 v-app -->
        <!-- v-main 组件接下来需要这些值并调整容器的大小 -->
        <v-app>
            <!-- 必须有app属性 -->
            <!-- 因为我们给了 v-app-bar app prop, Vuetify 知道它是布局的一部分 -->
            <!-- v-main然后获取我们的bar的注册高度，并从其可用内容区域中移除相同数量的空间。 -->
            <!-- 在这里，64px的空间从v-main的容器顶部移除。 -->
            <v-app-bar app>标题</v-app-bar>
            <!-- v-main 是无边界视口 -->
            <v-main>
                <!-- v-container 默认带边界 -->
                <v-container>
                    <h3>RTL 右到左排版</h3>
                    <v-btn color="success" v-on:click="changeToRTL">{{btnChRtlMsg}}</v-btn>
                    <br>
                    <br>

                    <h3> 响应式显示 </h3>
                    <v-card :height="bpDemoCardHeight.value">
                        跟据断点服务，获取视图的视口大小所属类型，根据类型修改v-card height
                        <br>
                        视口大小= {{bpDemoCardHeight.viewheight}} X {{bpDemoCardHeight.viewwidth}}
                        <br>
                        视口类型={{bpDemoCardHeight.type}} : 设置高度={{bpDemoCardHeight.value}}
                    </v-card>
                    <br>
                    <h4>$vuetify.breakpoint对象</h4>
                    <pre>
                    {
                        // 断点
                        xs: boolean
                        sm: boolean
                        md: boolean
                        lg: boolean
                        xl: boolean
                      
                        // 条件
                        xsOnly: boolean
                        smOnly: boolean
                        smAndDown: boolean
                        smAndUp: boolean
                        mdOnly: boolean
                        mdAndDown: boolean
                        mdAndUp: boolean
                        lgOnly: boolean
                        lgAndDown: boolean
                        lgAndUp: boolean
                        xlOnly: boolean
                      
                        // 如果屏幕宽度 < mobileBreakpoint 时为 true
                        mobile: boolean
                        mobileBreakpoint: number
                      
                        // 当前断点的名称 (例如. 'md')
                        name: string
                      
                        // 尺寸
                        height: number
                        width: number
                      
                        // 阈值
                        // 可通过选项配置
                        thresholds:
                        {
                          xs: number
                          sm: number
                          md: number
                          lg: number
                        }
                      
                        // 滚动条
                        scrollBarWidth: number
                      }
                      
                </pre>

                    <br>
                    <h4> 断点条件 </h4>
                    <v-sheet :min-height="$vuetify.breakpoint.xs ? 300 : '20vh'" :rounded="$vuetify.breakpoint.xsOnly">
                        <v-btn color="success">text</v-btn>
                    </v-sheet>

                    <br>
                    <h4> Mobile断点 </h4>
                    <p>
                        mobileBreakpoint 选项接受断点名称 (xs, sm, md, lg, xl) 作为有效的配置选项。<br>
                        一旦设置，提供的值会被传播到支持的组件，如 <b>v-navigation-drawer</b>
                    </p>
                    <p>
                        单个组件可以使用 mobile-breakpoint 属性重写它继承的 默认 值。<br>
                        在下面的示例中，当视口大小小于 1024px 时，我们强制 v-banner 进入 mobile状态
                    </p>
                    <v-banner mobile-breakpoint="1024">
                        this banner
                    </v-banner>

                    <br>
                    <h4> 阈值 </h4>
                    <h5>修改的代码如下</h5>
                    <pre>
                    export default new Vuetify({
                        breakpoint: {
                          thresholds: {
                            xs: 340,    //0~340是xs
                            sm: 540,
                            md: 800,
                            lg: 1280,   //没有xl 是因为大于lg就是xl了
                          },
                          scrollBarWidth: 24,
                        },
                      })
                </pre>

                    <br>
                    <br>
                    <h3> vuetify 国际化和翻译 </h3>
                    <br>
                    <div style="background-color: lightgrey;">
                        <v-badge left color="success" ref='badge'>
                            {{$vuetify.lang.t('$vuetify.badge')}}
                        </v-badge>
                        <p> {{$vuetify.lang.t('$vuetify.mytranslate')}}</p>
                        <p> {{$vuetify.lang.t('$vuetify.namespace.mytranslate1')}}</p>

                    </div>


                    <br>
                    <br>
                    <h3>视口滚动函数 $vuetify.goTo(target, options) </h3>
                    <demogoto ref='demogoto'></demogoto>

                    <br>
                    <br>
                    <h3>vuetify 主题</h3>
                    <v-btn-toggle mandatory v-model:value="$vuetify.theme.dark">
                        <v-btn flat color="success" v-bind:value="false">
                            亮白主题
                        </v-btn>
                        <v-btn flat color="secondary" v-bind:value="true">
                            暗黑主题
                        </v-btn>
                    </v-btn-toggle>

                    <br>
                    <h4> 主题提供器 v-theme-provider </h4>
                    <themeproviderdemo></themeproviderdemo>

                    <br>
                    <br>
                    <!-- Grid system（网格系统）  -->
                    <h3>Grid system（网格系统）</h3>

                    <br>
                    <h4> align 用在 v-row 行里面 </h4>
                    <v-container class="grey lighten-5 mb-6">
                        <v-row align="center" no-gutters style="height: 150px;">
                            <v-col v-for="n in 3" :key="n">
                                <v-card class="pa-2" outlined tile>
                                    第 {{n}} 列
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> align 用在 v-col 列里面 </h4>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters style="height: 150px;">
                            <v-col v-for="align in ['start','center','end']" :key="align" :align-self="align">
                                <v-card class="pa-2" outlined tile>
                                    align = '{{align}}'
                                </v-card>
                            </v-col>
                        </v-row>
                        <br>
                        <v-row no-gutters>
                            <v-col cols='6' offset='3'>
                                <v-card class="pa-2" outlined tile>
                                    align-self 属性是指在 v-cols 内容里的垂直方向上的对齐
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4>cols 属性</h4>
                    <p>默认情况下,cols为空，flex 组件将自动填充行或列中的可用空间。</p>
                    <v-container class="grey lighten-5">
                        <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
                            <v-col v-for="k in n + 1" :key="k" :cols="k">
                                <v-card class="pa-2" outlined tile>
                                    {{ k }} of {{ n + 1 }}, cols="{{k}}"
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 水平对齐 justify 属性</h4>
                    <v-container class="grey lighten-5">
                        <v-row v-for="j,i in  ['start','center','end','space-around','space-between']" :key="j"
                            :justify="j">
                            <v-col v-for="k in 2" :key="k" md="4" sm="5">
                                <v-card class="pa-2" outlined tile>
                                    第 {{i+1}} 行，第 {{k}} 列 ; v-row.justify="{{j}}"
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 无间隔属性 no-gutters</h4>
                    <p>可以使用 no-gutters 属性从 v-row 中移除负值外边距，从其子 v-col 中移除内边距</p>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters v-for="i in 2">
                            <v-col cols="12" sm="6" md="8">
                                <v-card class="pa-2" outlined tile>
                                    .col-12 .col-sm-6 .col-md-8
                                </v-card>
                            </v-col>
                            <v-col cols="6" md="4">
                                <v-card class="pa-2" outlined tile>
                                    .col-6 .col-md-4
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 偏移 offset 属性</h4>
                    <v-container class="grey lighten-5">
                        <v-row class="mb-6" no-gutters>
                            <v-col md="4" sm="2">
                                <v-card class="pa-2" outlined tile>
                                    .col-md-4
                                </v-card>
                            </v-col>
                            <v-col md="4" sm="2" offset-md="4" offset-sm="2">
                                <v-card class="pa-2" outlined tile>
                                    .col-md-4 .offset-md-4
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row class="mb-6" no-gutters>
                            <v-col md="3" sm="2" offset-md="3" offset-sm="1">
                                <v-card class="pa-2" outlined tile>
                                    .col-md-3 .offset-md-3
                                </v-card>
                            </v-col>
                            <v-col md="3" sm="2" offset-md="3" offset-sm="1">
                                <v-card class="pa-2" outlined tile>
                                    .col-md-3 .offset-md-3
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row no-gutters>
                            <v-col md="6" sm="3" offset-md="3" offset-sm="1">
                                <v-card class="pa-2" outlined tile>
                                    .col-md-6 .offset-md-3
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 排序 order属性 </h4>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters>
                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    排第一, 没有使用order属性
                                </v-card>
                            </v-col>
                            <v-col order="12">
                                <v-card class="pa-2" outlined tile>
                                    放在第二列，但排最后, order=12
                                </v-card>
                            </v-col>
                            <v-col order="1">
                                <v-card class="pa-2" outlined tile>
                                    放在第三列，但排中间, order=1
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 先后排序 order属性 直接指定 first last </h4>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters>
                            <v-col order="last">
                                <v-card class="pa-2" outlined tile>
                                    First, but last, order="last"
                                </v-card>
                            </v-col>
                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    Second, but unordered
                                </v-card>
                            </v-col>
                            <v-col order="first">
                                <v-card class="pa-2" outlined tile>
                                    Third, but first, order="first"
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 列的自动换行 </h4>
                    <p>当在给定的行中放置了超过 12 个列时（没有使用 .flex-nowrap），每一组额外的列都将被放置到新的行。</p>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters>
                            <v-col cols="9">
                                <v-card class="pa-2" outlined tile>
                                    .col-9
                                </v-card>
                            </v-col>
                            <v-col cols="4">
                                <v-card class="pa-2" outlined tile>
                                    .col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new
                                    line as one contiguous unit.
                                </v-card>
                            </v-col>
                            <v-col cols="6">
                                <v-card class="pa-2" outlined tile>
                                    .col-6<br>Subsequent columns continue along the new line.
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 等宽列 </h4>
                    <v-container class="grey lighten-5">
                        <v-row no-gutters>
                            <template v-for="n in 4">
                                <v-col :key="n">
                                    <v-card class="pa-2" outlined tile>
                                        Column
                                    </v-card>
                                </v-col>
                                <!-- v-responsive的作用是生成一个100%宽的空的列占位符，使后面的v-col自动换行 -->
                                <v-responsive v-if="n === 2" :key="`width-${n}`" width="100%" height="0"></v-responsive>
                            </template>
                        </v-row>
                    </v-container>

                    <br>
                    <h4>外边距辅助</h4>
                    <p>使用外边距工具类可以强行把同级列分开。</p>
                    <div class="ma-5 pa-5">
                        <v-container class="grey lighten-5">
                            <v-row>
                                <v-col md="4">
                                    <v-card class="pa-2" outlined tile>
                                        .col-md-4
                                    </v-card>
                                </v-col>
                                <v-col md="4" class="ml-auto">
                                    <v-card class="pa-2" outlined tile>
                                        .col-md-4 .ml-auto
                                    </v-card>
                                </v-col>
                            </v-row>
                            <v-row>
                                <v-col md="3" class="ml-md-auto">
                                    <v-card class="pa-2" outlined tile>
                                        .col-md-3 .ml-md-auto
                                    </v-card>
                                </v-col>
                                <v-col md="3" class="ml-md-auto">
                                    <v-card class="pa-2" outlined tile>
                                        .col-md-3 .ml-md-auto
                                    </v-card>
                                </v-col>
                            </v-row>
                            <v-row>
                                <v-col cols="auto" class="mr-auto">
                                    <v-card class="pa-2" outlined tile>
                                        .col-auto .mr-auto
                                    </v-card>
                                </v-col>
                                <v-col cols="auto">
                                    <v-card class="pa-2" outlined tile>
                                        .col-auto
                                    </v-card>
                                </v-col>
                            </v-row>
                        </v-container>
                    </div>

                    <br>
                    <h4>网格嵌套</h4>
                    <p>与其他框架类似，网格可以被嵌套，以实现非常自定义的布局。</p>
                    <v-container class="grey lighten-5">
                        <v-row>
                            <v-col sm="9">
                                <v-card class="pa-2" outlined tile>
                                    Level 1 嵌套顶层: .col-sm-9
                                </v-card>
                                <v-row no-gutters>
                                    <v-col cols="8" sm="4">
                                        <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>
                                            Level 2 嵌套2层: .col-8 .col-sm-5
                                        </v-card>
                                    </v-col>
                                    <v-col cols="4" sm="8">
                                        <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>
                                            Level 2 嵌套2层: .col-4 .col-sm-7
                                        </v-card>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4>一列宽度</h4>
                    <p>使用自动布局时，你可以只定义一列的宽度，并且仍然可以让它的同级元素围绕它自动调整大小。</p>
                    <v-container class="grey lighten-5">
                        <v-row class="mb-6" no-gutters>
                            <v-col v-for="n in 3" :key="n" :cols="n === 2 ? 6 : undefined">
                                <v-card class="pa-2" outlined tile>
                                    {{ n }} of 3 {{ n === 2 ? '(宽一点,其它平分)' : '' }}
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row no-gutters>
                            <v-col v-for="n in 3" :key="n" :cols="n === 2 ? 5 : undefined">
                                <v-card class="pa-2" outlined tile>
                                    {{ n }} of 3 {{ n === 2 ? '(宽一点,其它平分)' : '' }}
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 行和列断点 </h4>
                    <p>根据分辨率动态地改变你的布局。 （调整你的屏幕大小，并观看顶部 row 布局在 sm、md 和 lg 断点上的变化）。</p>
                    <v-container class="grey lighten-5">
                        <v-row class="mb-6" no-gutters>
                            <v-col :lg="$vuetify.breakpoint.lg ? 3 : $vuetify.breakpoint.sm ? 9 : 6" :md="6"
                                :sm="$vuetify.breakpoint.lg ? 3 : $vuetify.breakpoint.sm ? 9 : 6">
                                <v-card class="pa-2" outlined tile>
                                    col-{{ $vuetify.breakpoint.lg ? 3 : $vuetify.breakpoint.sm ? 9 : 6 }}
                                </v-card>
                            </v-col>
                            <v-col :lg="$vuetify.breakpoint.lg ? 9 : $vuetify.breakpoint.sm ? 3 : 6" :md="6"
                                :sm="$vuetify.breakpoint.lg ? 9 : $vuetify.breakpoint.sm ? 3 : 6">
                                <v-card class="pa-2" outlined tile>
                                    col-{{ $vuetify.breakpoint.lg ? 9 : $vuetify.breakpoint.sm ? 3 : 6 }}
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row no-gutters>
                            <v-col v-for="n in 3" :key="n" cols="sm">
                                <v-card class="pa-2" outlined tile>
                                    col
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4>v-spacer 空白占位列</h4>
                    <p>v-spacer 组件在你想要填充可用空间或在两个组件之间留出空间时非常有用。</p>
                    <v-container class="grey lighten-5">
                        <v-row>
                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    .col
                                </v-card>
                            </v-col>

                            <v-spacer></v-spacer>

                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    .col
                                </v-card>
                            </v-col>
                        </v-row>

                        <v-row>
                            <!-- cols="auto"使得列根据内容自动调整 -->
                            <v-col cols="auto" lg="3">
                                <v-card class="pa-2" outlined tile>
                                    .col-auto ......................
                                </v-card>
                            </v-col>

                            <v-spacer></v-spacer>

                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    .col
                                </v-card>
                            </v-col>

                            <v-spacer></v-spacer>

                            <v-col md="5">
                                <v-card class="pa-2" cols="auto" outlined tile>
                                    .col-md-5
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>
                    <p> 独特的布局 </p>
                    <v-container class="grey lighten-5">
                        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                        <v-row>
                            <v-col cols="12" md="8">
                                <v-card class="pa-2" outlined tile>
                                    .col-12 .col-md-8
                                </v-card>
                            </v-col>
                            <v-col cols="6" md="4">
                                <v-card class="pa-2" outlined tile>
                                    .col-6 .col-md-4
                                </v-card>
                            </v-col>
                        </v-row>

                        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                        <v-row>
                            <v-col v-for="n in 3" :key="n" cols="6" md="4">
                                <v-card class="pa-2" outlined tile>
                                    .col-6 .col-md-4
                                </v-card>
                            </v-col>
                        </v-row>

                        <!-- Columns are always 50% wide, on mobile and desktop -->
                        <v-row>
                            <v-col v-for="n in 2" :key="n" cols="6">
                                <v-card class="pa-2" outlined tile>
                                    .col-6
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>

                    <br>
                    <h4> 可变内容宽度 "auto"</h4>
                    <p>为列分配断点宽度可以根据其内容的性质宽度来配置调整大小。</p>
                    <v-container class="grey lighten-5">
                        <v-row class="mb-6" justify="center" no-gutters>
                            <v-col lg="2">
                                <v-card class="pa-2" outlined tile>
                                    1 of 3
                                </v-card>
                            </v-col>
                            <v-col md="auto">
                                <v-card class="pa-2" outlined tile>
                                    Variable width content
                                </v-card>
                            </v-col>
                            <v-col lg="2">
                                <v-card class="pa-2" outlined tile>
                                    3 of 3
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row no-gutters>
                            <v-col>
                                <v-card class="pa-2" outlined tile>
                                    1 of 3
                                </v-card>
                            </v-col>
                            <v-col md="auto">
                                <v-card class="pa-2" outlined tile>
                                    Variable width content
                                </v-card>
                            </v-col>
                            <v-col lg="2">
                                <v-card class="pa-2" outlined tile>
                                    3 of 3
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>


                </v-container>
            </v-main>

            <v-footer app>
                这里是视图脚
            </v-footer>
        </v-app>
    </div>

    <!-- **************************************上面是 html **************************************************** -->
    <!-- **************************************上面是 html **************************************************** -->
    <!-- **************************************上面是 html **************************************************** -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vuetify@2.4.9/es5/locale/zh-Hans.js"></script> -->

    <script>

        //vue单文件使用 import zhHans from 'vuetify/es5/locale/zh-Hans' 导入翻译
        var zhHans = {      //这些翻译是从 src/es5/locale/zh-Hans.js 提取出来的
            badge: '徽章',
            close: '关闭',
            dataIterator: {
                noResultsText: '没有符合条件的结果',
                loadingText: '加载中……'
            },
            dataTable: {
                itemsPerPageText: '每页数目：',
                ariaLabel: {
                    sortDescending: '：降序排列。',
                    sortAscending: '：升序排列。',
                    sortNone: '：未排序。',
                    activateNone: '点击以移除排序。',
                    activateDescending: '点击以降序排列。',
                    activateAscending: '点击以升序排列。'
                },
                sortBy: '排序方式'
            },
            dataFooter: {
                itemsPerPageText: '每页数目：',
                itemsPerPageAll: '全部',
                nextPage: '下一页',
                prevPage: '上一页',
                firstPage: '首页',
                lastPage: '尾页',
                pageText: '{0}-{1} 共 {2}'
            },
            datePicker: {
                itemsSelected: '已选择 {0}',
                nextMonthAriaLabel: '下个月',
                nextYearAriaLabel: '明年',
                prevMonthAriaLabel: '前一个月',
                prevYearAriaLabel: '前一年'
            },
            noDataText: '没有数据',
            carousel: {
                prev: '上一张',
                next: '下一张',
                ariaLabel: {
                    delimiter: 'Carousel slide {0} of {1}'
                }
            },
            calendar: {
                moreEvents: '还有 {0} 项'
            },
            fileInput: {
                counter: '{0} 个文件',
                counterSize: '{0} 个文件（共 {1}）'
            },
            timePicker: {
                am: 'AM',
                pm: 'PM'
            },
            pagination: {
                ariaLabel: {
                    wrapper: '分页导航',
                    next: '下一页',
                    previous: '上一页',
                    page: '转到页面 {0}',
                    currentPage: '当前页 {0}'
                }
            },
            rating: {
                ariaLabel: {
                    icon: 'Rating {0} of {1}'
                }
            }
        }

        var myLocaleT = Object.assign({}, zhHans,
            { //自定义的翻译内容
                mytranslate: "我的翻译内容",
                namespace: {
                    mytranslate1: "我的翻译内容1"
                }
            })


        //$vuetify.goTo() 函数进行跳转滚动
        var easings = { //这个应该是滚动的动画减速效果，从 src/es5/services/goto/easing-patterns.js 提取出来的
            linear(t) {
                return t;
            },
            easeInQuad(t) {
                return Math.pow(t, 2);
            },
            easeOutQuad(t) {
                return t * (2 - t);
            },
            easeInOutQuad(t) {
                return t < 0.5 ? 2 * Math.pow(t, 2) : -1 + (4 - 2 * t) * t;
            },
            easeInCubic(t) {
                return Math.pow(t, 3);
            },
            easeInOutCubic(t) {
                return t < 0.5 ? 4 * Math.pow(t, 3) : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
            },
            easeInQuart(t) {
                return Math.pow(t, 4);
            },
            easeOutQuart(t) {
                return 1 - Math.pow(--t, 4);
            },
            easeInOutQuart(t) {
                return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
            },
            easeInQuint(t) {
                return Math.pow(t, 5);
            },
            easeOutQuint(t) {
                return 1 + Math.pow(--t, 5);
            },
            easeInOutQuint(t) {
                return t < 0.5 ? 16 * Math.pow(t, 5) : 1 + 16 * Math.pow(--t, 5);
            }
        }
        var demogoto = {
            template: `
            <div>
                <v-container>
                    <v-row>
                        <v-col cols="12">
                            <h3 ref="radio" class="headline">
                                Target
                            </h3>

                            <v-radio-group v-model="type" row>
                                <v-radio label="Number 按数值滚动" value="number"></v-radio>

                                <v-radio label="Selector 滚动到元素选择子" value="selector"></v-radio>

                                <v-radio label="DOMElement 滚动到DOM元素" value="element"></v-radio>
                            </v-radio-group>
                            
                            <v-text-field v-if="type === 'number'" v-model="number" type="number" label="Number 滚动数"></v-text-field>

                            <v-select v-if="type === 'selector'" v-model="selector" label="Selector  选择子" :items="selections">
                            </v-select>

                            <v-select v-if="type === 'element'" v-model="selected" :items="elements" label="DOMElement  元素">
                            </v-select>
                        </v-col>

                        <v-col cols="12">
                            <h3 class="headline">
                                Options
                            </h3>

                            <v-select v-model="easing" :items="easings" label="Easing 滚动减速效果"></v-select>

                            <v-slider v-model="duration" min="0" max="1000" label="Duration 滚动用时ms" thumb-label></v-slider>

                            <v-slider v-model="offset" min="-500" max="500" label="Offset 滚动偏移，正数向上" thumb-label></v-slider>
                        </v-col>

                        <v-col>
                            <v-btn ref="button" block color="primary" @click="clickgotobtn">
                                执行  $vuetify.goTo(target, options)
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
            `,
            data: function () {
                return {
                    type: 'number',
                    number: 9999,
                    selector: '#first',
                    selections: ['#first', '#second', '#third'],
                    selected: 'Button',
                    elements: ['Button', 'Radio group', 'Badge'],
                    duration: 300,
                    offset: 0,
                    easing: 'easeInOutCubic',
                    easings: ['linear', 'easeInOutCubic'],// Object.keys(easings),
                }
            },
            computed: {
                target() {
                    const value = this[this.type]
                    if (!isNaN(value)) return Number(value)
                    else return value
                },
                options() {
                    return {
                        duration: this.duration,    //滚动用时
                        offset: this.offset,        //位置偏移 正数表示向上多滚动
                        easing: this.easing,        //减速效果
                    }
                },
                element() {
                    if (this.selected === 'Button') return this.$refs.button
                    else if (this.selected === 'Radio group') return this.$refs.radio
                    else if (this.selected === 'Badge') return this.$root.$refs.badge
                    else return null
                },
            },
            methods: {
                clickgotobtn() {
                    this.$vuetify.goTo(this.target, this.options)
                }
            }
        }

        //// src/router.js
        //下面的例子 直接引入和调用goTo函数，与vue-router联用
        // import Router from 'vue-router'
        // import goTo from 'vuetify/es5/services/goto'

        // export default new Router({
        //     scrollBehavior: (to, from, savedPosition) => {
        //         let scrollTo = 0

        //         if (to.hash) {
        //             scrollTo = to.hash
        //         } else if (savedPosition) {
        //             scrollTo = savedPosition.y
        //         }

        //         return goTo(scrollTo)
        //     },
        //     routes: [
        //         //
        //     ],
        // })


        //主题
        //自定义主题示例
        // src/plugins/vuetify.js
        // import Vue from 'vue'
        // import Vuetify from 'vuetify/lib'

        // const vuetify = new Vuetify({
        //     theme: {
        //         themes: {
        //             light: {
        //                 primary: '#3f51b5',
        //                 secondary: '#b0bec5',
        //                 accent: '#8c9eff',
        //                 error: '#b71c1c',
        //             },
        //         },
        //     },
        // })
        // 你也可以使用预定义的 material 颜色。
        // src/plugins/vuetify.js
        // import Vue from 'vue'
        // import Vuetify from 'vuetify/lib'

        // import colors from 'vuetify/lib/util/colors'

        // const vuetify = new Vuetify({
        //     theme: {
        //         themes: {
        //             light: {
        //                 primary: colors.purple,
        //                 secondary: colors.grey.darken1,
        //                 accent: colors.shades.black,
        //                 error: colors.red.accent3,
        //             },
        //             dark: {
        //                 primary: colors.blue.lighten3,
        //             },
        //         },
        //     },
        // })

        //自定义主题变量 
        // src/plugins/vuetify/theme.js
        // import colors from 'vuetify/lib/util/colors'
        // export default {
        //     primary: {
        //         base: colors.purple.base,
        //         darken1: colors.purple.darken2,
        //     },
        //     secondary: colors.indigo,
        //     // 所有的键将生成主题样式,
        //     // 这里我们添加一个自定义的 `tertiary` 颜色
        //     tertiary: colors.pink.base,
        // }
        //你现在可以导入你的自定义主题对象并将其应用到 Vuetify
        // src/plugins/vuetify.js
        // import Vue from 'vue'
        // import Vuetify from 'vuetify/lib'
        // import light from './theme'
        // Vue.use(Vuetify)
        // export default new Vuetify({
        //     theme: {
        //         themes: { light },
        //     },
        // })

        //禁用主题
        // const vuetify = new Vuetify({
        //     theme: { disable: true },
        // })


        //主题提供器 用在指明主题的UI组件其 内部组件的主题变量
        var themeproviderdemo = {
            // <v-card
            //     dark //指明父类使用的主题
            //     flat
            template: `
            <div>
            <v-card
                dark
                flat
            >
                <v-toolbar
                flat
                height="72"
                >
                <v-switch
                    v-model="$vuetify.theme.dark"
                    hint="切换 Vuetify 全局主题"
                    inset
                    label="Vuetify Theme Dark"
                    persistent-hint
                ></v-switch>
                </v-toolbar>

                <v-card-text>
                <v-list>
                    <v-subheader>这个v-card-text 继续自父容器的主题</v-subheader>

                    <v-list-item
                    v-for="item in items"
                    :key="item"
                    >
                    <v-list-item-title v-text="item"></v-list-item-title>
                    </v-list-item>
                </v-list>

                <v-divider class="mb-y"></v-divider>

                <v-theme-provider root>
                    <v-list :rounded="true">
                    <v-subheader>
                        <span>这个v-theme-provider 继续root根主题，它还有dark,light可选 </span>
                        <strong>&nbsp;$vuetify.theme.dark</strong>
                    </v-subheader>

                    <v-list-item
                        v-for="item in items"
                        :key="item"
                    >
                        <v-list-item-title v-text="item"></v-list-item-title>
                    </v-list-item>
                    </v-list>
                </v-theme-provider>
                </v-card-text>
            </v-card>
            </div>
            `,
            props: {
                attrs: {
                    type: Object,
                    default: () => ({}),
                },
            },

            data: () => ({ items: ['One', 'Two', 'Three'] }),
        }



        ////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////////

        var vm = new Vue({
            el: '#app',
            data: {
                btnChRtlMsg: " 切换到右到左排版 "
            },
            vuetify: new Vuetify(
                {
                    lang: {     //添加自定义的翻译
                        locales: { zhHans, myLocaleT },
                        current: 'myLocaleT'
                    }
                }
            ),
            mounted() {
                console.log(this.$vuetify.breakpoint.width)
            },
            computed: {
                bpDemoCardHeight() {
                    var def = { type: 'xs', value: '220', viewwidth: 100, viewheight: 100 }
                    def.type = this.$vuetify.breakpoint.name
                    def.viewwidth = this.$vuetify.breakpoint.width
                    def.viewheight = this.$vuetify.breakpoint.height
                    switch (def.type) {
                        case 'xs':
                            def.value = 100
                            break
                        case 'sm':
                            def.value = 110
                            break
                        case 'md':
                            def.value = 120
                            break
                        case 'lg':
                            def.value = 130
                            break
                        case 'xl':
                            def.value = 140
                            break
                    }
                    def.type = this.$vuetify.breakpoint.name
                    return def
                }
            },
            methods: {
                changeToRTL: function () {
                    this.$vuetify.rtl = !this.$vuetify.rtl
                    if (this.$vuetify.rtl) {
                        this.btnChRtlMsg = " 切换到左到右排版 "
                    } else {
                        this.btnChRtlMsg = " 切换到右到左排版 "
                    }
                }
            },
            components: {
                demogoto,
                themeproviderdemo
            }
        })
    </script>
</body>

</html>